@import './variables.less';
@import '../../style/mixins.less';

.fnx-rate {
	display: inline-flex;
	cursor: pointer;
	user-select: none;

	&__item {
		position: relative;

		&:not(:last-child) {
			padding-right: var(--fnx-rate-icon-gutter);
		}

		&--full {
			color: var(--fnx-rate-icon-full-color);

			.fnx-rate__character {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				overflow: hidden;
				font-size: inherit;
			}
			.fnx-rate__void-character {
				display: block;
				width: 100%;
				color: var(--fnx-rate-icon-void-color);
				font-size: inherit;
				opacity: 0;
			}
		}

		&--half {
			color: var(--fnx-rate-icon-full-color);

			.fnx-rate__character {
				position: absolute;
				top: 0;
				left: 0;
				width: 50%;
				overflow: hidden;
				font-size: inherit;
			}
		}

		&--zero {
			color: var(--fnx-rate-icon-void-color);

			.fnx-rate__character {
				position: absolute;
				top: 0;
				left: 0;
				width: 50%;
				opacity: 0;
				overflow: hidden;
				font-size: inherit;
			}
		}
	}

	&__void-character {
		display: block;
		width: 100%;
		color: var(--fnx-rate-icon-void-color);
		font-size: inherit;

		&--full {
			color: var(--fnx-rate-icon-full-color);
		}

		&--disabled {
			color: var(--fnx-rate-icon-disabled-color);
		}
	}

	&--disabled {
		cursor: not-allowed;

		.fnx-rate__character {
			color: var(--fnx-rate-icon-disabled-color);
		}
		.fnx-rate__void-character {
			color: var(--fnx-rate-icon-void-disabled-color);
		}
	}

	&--readonly {
		cursor: default;
	}
}
